<template>
  <span>欢迎你，{{ username }}!使用sunny自动化测试用例管理</span>
  <span id="gender">{{ xingbie }}</span>
  <div>
    请输入您的名字：
    <input v-model="username" />
    <!-- <slot-counter>
      <template #guest>
        <strong>Boss</strong>
      </template>

      <template #position>
        <strong>{{ compName }}</strong>
      </template></slot-counter
    > -->
    <MyCounter></MyCounter>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import MyCounter from "@/components/countersLearn/MyCounter.vue";
import SlotCounter from "./countersLearn/SlotCounter.vue";
let compName = ref("顶栏");
let username = ref("will");
let gender = ref("男");

//在setup方法中定义一个函数
function changeName(event) {
  console.log(username);
  username.value = event.target.value;
}

//计算属性，由computed函数返回了一个值，赋值给对应的计算属性。
let xingbie = computed(() => {
  console.log("在计算属性getter中输出this：", this);
  if (gender.value === "男") {
    return "先生";
  } else if (gender.value === "女") {
    return "女士";
  } else {
    return "人";
  }
});
</script>

<style scoped></style>
